import React, { useEffect, useState } from 'react'
import { useSelector, shallowEqual,useDispatch } from 'react-redux'
import { Button,Modal } from 'antd'
import screenfull from 'screenfull'
import dayjs from 'dayjs'
import { 
  FullscreenOutlined, 
  FullscreenExitOutlined,
  ExclamationCircleOutlined 
} from '@ant-design/icons'
import {deleteUserAction} from '../../store/actionCreators/login'
import {selectNavAction} from '../../store/actionCreators/admin'

import './header.less'


const { confirm } = Modal;

export default function Header(props) {

  const [isFull, setIsfull] = useState(false)
  const [nowDate,setNowDate] = useState(dayjs().format('YYYY年 MM月 DD日 HH:mm:ss'))
  const dispatch = useDispatch()

  const { userInfo,adminInfo } = useSelector((state) => ({
    userInfo: state.userInfo.user,
    adminInfo:state.adminInfo.current_nav
  }), shallowEqual)
  const { username } = userInfo

  // 监听全屏的改变
  useEffect(() => {
    screenfull.onchange(() => {
      setIsfull(!isFull)
    })
  }, [isFull])

  useEffect(()=>{
    let timer = setInterval(()=>{
      setNowDate(dayjs(Date.now()).format('YYYY年 MM月 DD日 HH:mm:ss'))
    },1000)

    return () => {
      clearInterval(timer)
    }
  },[nowDate])

  // 切换是否全屏
  const fullScreen = () => {
    screenfull.toggle()
  }



   // 退出登录
   const loginOut = () => {
    confirm({
      title:'确定退出吗?',
      icon:<ExclamationCircleOutlined />,
      content:'退出后要重新登录',
      okText:'确定',
      cancelText:'取消',
      onOk:()=>{
        dispatch(deleteUserAction())
        dispatch(selectNavAction(''))
      },
      onCancel:()=>{
        console.log('取消')
      }
    })

    
  }

  return (
    <div className="header">
      <div className="header-top">
        <Button size="small" onClick={fullScreen}>
          {isFull ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
        </Button>
        <span className="user">欢迎! {username}</span>
        <Button type="link" onClick={loginOut}>退出登录</Button>
      </div>
      <div className="header-bottom">
        <div className="bottom-left">
          <h1>{adminInfo}</h1>
        </div>
        <div className="bottom-right">
          <span>{nowDate}</span>
        </div>
      </div>
    </div>
  )
}














